<template>
  <div class="upd">
    <el-container>
      <el-aside width="280px"><el-container>
        <el-header>管理员</el-header>
        <el-main>
          <div style="overflow-y: scroll;max-height: 650px">
            <div v-for="item in admin" @click="getName(item.name)" style="padding: 10px;">
              <el-button type="primary" plain round="">{{item.name}}</el-button>
<!--              <a style="font-size: 20px;text-decoration: none" ></a>-->
            </div>
          </div>
        </el-main>
      </el-container></el-aside>
      <el-main>
        <div>

          <el-descriptions class="margin-top" title="" :column="3" :size="mini" border>
            <template slot="title">
              <div style="text-align: left;font-family:新宋体;height: 30px">
                <h1>管理员信息</h1>
              </div>
              <div style="text-align: left;position:relative;top: 0">
                <el-avatar class="avat" :src="this.form.img" ></el-avatar>
              </div>
            </template>

            <template slot="extra">
              <div style="position: relative;top: 60px;">
                <el-button type="primary" size="large" @click="dialogFormVisible = true">操作</el-button>
              </div>
            </template>

            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                账号
              </template>
              {{form.name}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-lock"></i>
                密码
              </template>
              <el-input  type="password" disabled="true" value="form.password" ></el-input>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="fa fa-address-book-o" aria-hidden="false"></i>
                昵称
              </template>
              {{form.nickname}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-tickets"></i>
                角色
              </template>
              {{form.root}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-location-information"></i>
                最近登录IP
              </template>
              {{form.login_ip}}
            </el-descriptions-item>
          </el-descriptions>
         <div class="dia">
          <el-dialog title="信息修改" :visible.sync="dialogFormVisible">
            <el-form :model="dialog">
<!--              <el-form-item label="密码" :label-width="formLabelWidth" >-->
<!--                <el-input v-model="dialog.password" autocomplete="off" :placeholder="this.form.password"></el-input>-->
<!--              </el-form-item>-->
              <el-form-item label="昵称" :label-width="formLabelWidth">
                <el-input v-model="dialog.nickname" autocomplete="off" :placeholder="this.form.nickname"></el-input>
              </el-form-item>
              <el-form-item label="角色" :label-width="formLabelWidth">
                <el-select v-model="dialog.root" :placeholder="form.root" >
                  <el-option label="用户管理员" value="用户管理员"></el-option>
                  <el-option label="博客管理员" value="博客管理员"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false" style="right: 40%">取消</el-button>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <el-button type="primary" @click="updateDetail()">修改</el-button>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
          </el-dialog>
         </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {showAdmin} from "@/api/admin_api";
import {adminDetail} from "@/api/admin_api";
import {updateAdmin} from "@/api/admin_api";

export default {
  name: "admin-update",
  components: {
  },
  data(){
    return{
      admin:[

      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        // img:require('@/assets/img/管理员1号.jpg'),
        // name:'2222',
        // nickname: 'hahaah',
        // root:'用户管理员',
        // password:'123456',
        // login_ip:'100.1.1.1',
      },
      dialog:{
        name:'',
        nickname: '',
        password: '',
        root:''
      },
      formLabelWidth: '120px',

    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    updateDetail(){
      this.dialog.name = this.form.name;
      updateAdmin(this.dialog).then(()=>{
      })
      this.dialogFormVisible = false;
      this.form.password = this.dialog.password;
      this.form.nickname = this.dialog.nickname;
      this.form.root = this.dialog.root;
    },


    getName(name){
      adminDetail(name).then((res)=>{
        this.form = res.data.data;
      })
    }
  },
  created() {
    showAdmin().then((res)=>{
      this.admin = res.data.data
    })
  }

}
</script>

<style>
.upd .el-header {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.upd .el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  /*line-height: 300px;*/
}

.upd .el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  /*line-height: 300px;*/
}
body > .el-container {
  margin-bottom: 40px;
}

/*侧边栏连接样式*/
.upd a {
  color: #2c3e50;
}

.upd a:hover{
  color:  rgb(255, 208, 75);
}

/*头像*/
.avat{
  width: 90px;
  height: 90px;
}

/*弹出框*/
.dia .el-dialog__title{
  font-size: 25px;
  color: #FFFFFF;
}
.el-dialog .el-form-item__label{
  font-size: 20px;
  color: #FFFFFF;
}


</style>